import React , { Component } from 'react';
import './roles-mgt.css';
import { Modal,List,message, } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import RolesMgtCheckbox from '../../components/role-mgt-checkbox/role-mgt-checkbox';
import { reqRoleList,reqDeleteRole,reqMenusList, } from '../../api';
import {getRolesButtons} from '../../utils/storageUtils';
import deleteIcon from '../../assets/image/delete.png';
import {PlusCircleOutlined} from '@ant-design/icons';
const { confirm } = Modal;


class RolesMgt extends Component {

  constructor(props) {
    super(props);
    this.state = {
      roleList: [],
      authList:[], 
      buttonList:[],
      role:'',   // role是一个对象
      loading: false,
      roleButtons:[], // 有权限的按钮
      ListItemIndex: null,
    }
  };

  getRolesList = async() => {     // 获取全部角色
    this.setState({loading: true});
    const result = await reqRoleList();
    console.log("获取全部角色",result);
    this.setState({loading: false})
    if(result.code === 200) {
      const roleList = result.data;
      this.setState({
        roleList
      },() => {
        if(this.state.role.role_id){   // 如果role存在，那更新role(主要用在编辑和新增完角色后及时更新页面)
          this.state.roleList.map((item) => {
            if(item.role_id === this.state.role.role_id){
              this.setState({
                role: item
              })
            }
          })
        }
      })
      
    }else{
      message.error(result.data)
    }
  }

  getAllMenus = async() => {   // 获取所有菜单
    this.setState({loading: true});
    const result = await reqMenusList();
    this.setState({loading: false})
    if(result.code === 200) {
      const authList = result.data;
      var buttonList = [];
      authList.map((item) => {
        const title = item.title;
        var button = [];
        item.routing_buttons.map((item1) => {
          button.push(item1.value);
        })
        buttonList.push({title: title, button: button})
      })
      this.setState({
        authList,
        buttonList
      },()=>console.log("权限获取所有菜单",this.state.authList,this.state.buttonList))
    }else{
      message.error(result.data)
    }
  }

  getroleButtons = () => {  // 获取该模块的有权限的按钮
    getRolesButtons().map((item) => {
      if(item.key === '/roles-mgt'){
        this.setState({
          roleButtons: item.buttons   
        })
      }
    })
  }

  noRightMessage = () => {
    message.error("无访问权限！");
  }
  
  showAddRoleInfor = async() => {   //显示 创建角色 页面
    console.log('addRoleInfor()');
    this.setState({
      role:{}
    });
  }

  showEditRoleInfor = async(item) => {    //显示 设置角色权限 
    console.log('authRoleInfor()',item);
    this.setState({
      role: item
    });
  }

  handleDeleteOnOk = async(item) => {  // 删除onOk   
    const role_id = item.role_id;
    const result = await reqDeleteRole(role_id); 
    // console.log("删除角色",result); 
    if(result.code === 200){
      this.getRolesList();
    }   
  };

  showDeleteConfirm = (item) => {   // 删除响应函数   
    confirm({
      title: '您确定要删除该角色吗?',
      icon: <ExclamationCircleOutlined />,
      okText: '删除',
      okType: 'danger',
      cancelText: '取消',
      onOk: () => this.handleDeleteOnOk(item)  
    })
 };

 componentWillMount() {
  this.getroleButtons();
}
  componentDidMount() {    
    this.getRolesList();  // 获取全部角色
    this.getAllMenus();   // 获取全部菜单
  }
 
  render() {
    const {loading,roleList,role,authList,buttonList,roleButtons,ListItemIndex} = this.state;  
    return (
      <div className='role-mgt-wrapper'>
        <div className='role-mgt-left' >
          <div className='role-mgt-head'>
            <div className='role-mgt-title'>角色列表</div>
            {
              roleButtons.indexOf("role-create1") === -1 ? null : <div className='role-add' onClick={this.showAddRoleInfor}><PlusCircleOutlined /></div>
            } 
          </div>
          <List
            className="role-list"
            dataSource={roleList}  
            loading = {loading}
            renderItem={(item,index) => (
              <List.Item 
                // className="role-list-item"
                className={ListItemIndex === index ? 'role-list-item-active' : 'role-list-item'}
                actions={<i className="iconfont icon-button">&#xe614;</i>}
              >
                <div className="show-roleInfo" onClick={() => {this.showEditRoleInfor(item);this.setState({ListItemIndex:index})}}>
                  <span className="role-span">{item.role_name_Zh}</span>
                  <p className="role-p" style={{color:ListItemIndex === index ? '#FFFFFF': ''}}>{item.role_remark}</p>
                </div>  
                <div className="show-button" >
                  {/* <i className="iconfont icon-button" onClick={ roleButtons.indexOf("role-delete1") === -1 ? this.noRightMessage : () => this.showDeleteConfirm(item)}>&#xe614;</i> */}
                  <img src={deleteIcon} className="icon-button" alt="" onClick={ roleButtons.indexOf("role-delete1") === -1 ? this.noRightMessage : () => this.showDeleteConfirm(item)}/>
                </div>
              </List.Item>
            )}
          />
          {/* <div className="role-add" onClick={this.showAddRoleInfor}>
            {
              roleButtons.indexOf("role-create1") === -1 ? null : <span className="role-add-span">新增角色</span>
            }
          </div> */}
        </div> 
        {(role === '') ?  null :
         <RolesMgtCheckbox 
            role = {role}
            getRoleList={this.getRolesList} 
            showEditRoleInfor={this.showEditRoleInfor} 
            authList={authList} 
            buttonList={buttonList} 
            roleButtons={roleButtons} 
          />}
      </div>
    )
  }
}

export default RolesMgt;
